<template>
  <view class="example">
    <view class="container">
      <view class="example-title">故障填写示例</view>
      <view class="tabs">
        <view
          v-for="(item, index) in info"
          :key="index"
          :class="['tabs-item', tabIdx == index ? 'act' : '']"
          @click="handleClickTab(index)"
        >
          {{ item.tabName }}
          <view class="line" v-if="tabIdx == index"></view>
        </view>
      </view>
      <scroll-view
        style="height: 60vh"
        :scroll-top="scrollTop"
        scroll-y="true"
        class="scroll-Y"
        scroll-with-animation
        @scroll="handleScroll"
      >
        <block v-for="(item, i) in info" :key="i">
          <view class="example-content" style="padding-top: 16rpx;" v-if="tabIdx === i">
            <!-- <view class="info">{{ item.title }}</view> -->
            <view class="example-crad">
              <view class="example-crad-title">故障部件</view>
              <view class="row">
                <view class="title">故障部件</view>
                <view class="content">{{ item.partName }}</view>
              </view>
              <view
                class="row"
                :class="{ active: exampleType === 'fault_desc' }"
              >
                <view class="title">故障描述</view>
                <view class="content">{{ item.partDesc }}</view>
              </view>
              <view
                class="row"
                :class="{ active: exampleType === 'fault_image' }"
              >
                <view class="title">故障部件-图片/视频</view>
                <view class="content">
                  <view class="img-row">
                    <image
                      v-for="(img,idx) in item.partImages"
                      :key="img"
                      class="img-box"
                      :src="img"
                      @click="previewImage(idx, item.partImages)"
                    />
                  </view>
                </view>
              </view>
            </view>
            <view class="example-crad">
              <view class="example-crad-title">维修记录</view>
              <view class="row">
                <view class="title">维修类型</view>
                <view class="content"
                  ><view class="tag">{{ item.recordTag }}</view></view
                >
              </view>
              <view
                class="row"
                :class="{ active: exampleType === 'record_desc' }"
              >
                <view class="title">维修处理过程-描述</view>
                <view class="content">{{ item.recordDesc }}</view>
              </view>
              <view
                class="row"
                :class="{ active: exampleType === 'record_image' }"
              >
                <view class="title">维修处理过程-图片/视频</view>
                <view class="content">
                  <view class="img-row">
                    <image
                      v-for="(img,idx) in item.recordImages"
                      :key="img"
                      class="img-box"
                      :src="img"
                      @click="previewImage(idx, item.recordImages)"
                    />
                  </view>
                </view>
              </view>
            </view>
            <view class="example-crad" id="item-2">
              <view class="example-crad-title">维修结果</view>
              <view
                class="row"
                :class="{ active: exampleType === 'finish_reason' }"
              >
                <view class="title">故障原因</view>
                <view class="content"
                  ><view class="tag">{{ item.resultTag }}</view></view
                >
              </view>
              <view
                class="row"
                :class="{ active: exampleType === 'finish_reason' }"
              >
                <view class="title">原因说明</view>
                <view class="content">{{ item.resultTagDesc }}</view>
              </view>
              <view
                class="row"
                :class="{ active: exampleType === 'finish_desc' }"
              >
                <view class="title">故障说明</view>
                <view class="content">{{ item.resultDesc }}</view>
              </view>
              <view
                class="row"
                :class="{ active: exampleType === 'finish_image' }"
              >
                <view class="title">维修完成-图片/视频</view>
                <view class="content">
                  <view class="img-row">
                    <image
                      v-for="(img,idx) in item.resultImages"
                      :key="img"
                      class="img-box"
                      :src="img"
                      @click="previewImage(idx, item.resultImages)"
                    />
                  </view>
                </view>
              </view>
            </view>
          </view>
        </block>
      </scroll-view>
      <view class="example-btn">
        <view role="button" class="btn" @click="closeExample">已了解</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
	props: {
		exampleType: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			scrollTop: 0,
			tabIdx: 0,
			info: [
				{
					tabName: '厅门电气主门锁',
					title: '示例1-厅门电气主门锁',
					partName: '层站>厅门>厅门门头>厅门电气主门锁',
					partDesc: '电气主门锁卡阻',
					partImages: [
						'https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/592800/1721704528583_9z7vtq93.jpeg',
					],
					recordTag: '设备维修',
					recordDesc: '清洁门头油泥，使门关到位',
					recordImages: [
						'https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/592800/1721704730718_n9b3kjzf.jpeg',
					],
					resultTag: '其他',
					resultTagDesc: '门头油泥过多导致门关不到位，主门锁无法接通导致故障',
					resultDesc: '清理油泥使门关到位，接通主触点，电梯恢复运行',
					resultImages: [
						'https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/592800/1721704866248_3p2yy9c3.jpeg',
					],
				},
				{
					tabName: '厅门传动钢丝绳',
					title: '示例2-厅门传动钢丝绳',
					partName: '层站>厅门>厅门门头>厅门传动钢丝绳',
					partDesc: '钢丝绳缠绕，导致厅门无法关紧',
					partImages: [
						'https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/592800/1721705071427_r9nsldny.jfif',
					],
					recordTag: '设备维修',
					recordDesc: '钢丝绳过松，调整涨紧螺栓',
					recordImages: [
						'https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/592800/1721705100146_66ormtlb.jfif',
					],
					resultTag: '其他',
					resultTagDesc: '长时间运行，导致钢丝绳延长',
					resultDesc:
            '钢丝绳松动导致缠绕自闭力不足，通过调整涨紧螺栓电梯恢复运行',
					resultImages: [
						'https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/592800/1721705116242_zvpunt3c.jfif',
					],
				},
			],
		};
	},
	watch: {
		exampleType(val) {
			console.log(val, 'val');
			this.tabIdx = 0;
			if (val) {
				this.setScrollTop(val);
			}
		},
	},
	mounted() {
		// this.scrollTop = val
	},
	methods: {
		handleClickTab(index) {
			this.tabIdx = index;
			if (this.scrollTop != 0) {
				this.$nextTick(() => {
					this.scrollTop = 0;
				});
			}
		},
		previewImage(idx, urls) {
			this.$previewMedia({
				current: idx,
				sources:urls,
			});
		},
		closeExample() {
			this.scrollTop = 0;
			setTimeout(() => {
				this.$emit('closeExample');
			}, 100);
		},
		handleScroll(event) {
			const { scrollTop } = event.detail;
			console.log(scrollTop, 'scrollTop');
		},
		setScrollTop(val) {
			this.$nextTick(() => {
				setTimeout(() => {
					console.log(this.$refs.myScroll,'myScroll');
					let scrollTop = 0;
					let domHeight = 0;
					const query = uni.createSelectorQuery().in(this);
					query
						.select('.scroll-Y')
						.boundingClientRect((data) => {
							console.log(data, 'data');
							// scrollTop = data.top;
							// this.elementHeight = data.height;
							console.log(data.height, 'data.height;');
							domHeight = data.height + 100;
							// console.log(domHeight, "domHeight");
							switch (val) {
							case 'fault_desc':
								scrollTop = 0;
								break;
							case 'fault_image':
								scrollTop = 0;
								break;
							case 'record_desc':
								scrollTop = domHeight / 2;
								break;
							case 'record_image':
								scrollTop = domHeight / 2;
								break;
							case 'finish_reason':
								scrollTop = domHeight;
								break;
							case 'finish_desc':
								scrollTop = domHeight;
								break;
							case 'finish_image':
								scrollTop = domHeight;
								break;
							default:
								scrollTop = 0;
								break;
							}
							console.log();
							this.scrollTop = scrollTop;
							console.log(this.scrollTop, 'scrollTop');
						})
						.exec();
				}, 200);

				// if (scrollTop) {
				//   setTimeout(() => {
				//     this.scrollTop = scrollTop;
				//     console.log(this.scrollTop, "scrollTop");
				//   }, 200);
				// }
				// this.$forceUpdate();
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.example {
  background-color: #fff;
  border-radius: 8rpx;
  width: 90vw;
  &-content {
    text-align: left;
    padding: 0 20rpx 0.1rpx 20rpx;
    background: linear-gradient(180deg, #f3f6f8, #dcf0ff);
    .info {
      padding: 20rpx 0;
    }
  }
  &-title {
    font-size: 28rpx;
    font-weight: 500;
    padding: 28rpx 0;
    text-align: center;
    border-top-left-radius: 8rpx;
    border-top-right-radius: 8rpx;
    background-color: #fff;
  }
  &-crad {
    color: #333333;
    background: #ffffff;
    border-radius: 8rpx;
    padding: 32rpx 8rpx;
    margin-bottom: 16rpx;
    box-sizing: border-box;
    &-title {
      padding: 0 12rpx;
      margin-bottom: 24rpx;
      font-weight: 500;
      font-size: 28rpx;
      // padding-right: 20rpx;
    }
    .align_center {
      align-items: center !important;
    }
    .row {
      display: flex;
      margin-bottom: 16rpx;
      padding: 8rpx 12rpx;
      font-size: 26rpx;
      // align-items: flex-start;
      flex-direction: column;
      .title {
        // white-space: nowrap;
        display: flex;
        align-items: center;
        font-weight: 500;
        color: #333333;
        margin-bottom: 12rpx;
        &::before {
          content: "";
          display: inline-block;
          width: 4rpx;
          height: 32rpx;
          background-color: #0091ff;
          margin-right: 10rpx;
        }
        // &::after {
        //   content: "*";
        //   color: #ff0000;
        // }
      }
      .content {
        // text-align: right;
        // width: 0;
        // flex: 1;
        font-weight: normal;
        .tag {
          display: inline-block;
          padding: 8rpx 16rpx;
          border: 2rpx solid #0091ff;
          background-color: #fff;
          color: #0091ff;
          border-radius: 8rpx;
          width: max-content;
        }
        .img-row {
          display: flex;
          // justify-content: flex-end;
          flex-wrap: wrap;
          margin-bottom: -8rpx;
          image {
            width: 112rpx;
            height: 112rpx;
            margin-right: 8rpx;
            margin-bottom: 8rpx;
          }
        }
        // .img-box {
        //   margin-right: 8rpx;
        //   margin-bottom: 8rpx;
        // }
      }
    }
    .active {
      background-color: #f3f6f8;
    }
    & > .row:nth-last-child(1) {
      margin-bottom: 0;
    }
  }
  &-btn {
    padding: 26rpx 20rpx;
    background-color: #fff;
    border-bottom-left-radius: 8rpx;
    border-bottom-right-radius: 8rpx;
    .btn {
      height: 70rpx;
      line-height: 70rpx;
      text-align: center;
      background: #0091ff;
      color: #ffffff;
      font-size: 28rpx;
      border-radius: 8rpx;
      font-weight: 500;
    }
  }
}
.tabs {
  background-color: #ffffff;
  display: flex;
  border-bottom: 2rpx #eee solid;
  height: 86rpx;
  justify-content: space-evenly;
  &-item {
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0 20rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: #93b1c7;
    transition: 0.4s all;
    position: relative;
  }

  .line {
    width: 100%;
    height: 4rpx;
    background: #0091ff;
    border-radius: 4rpx;
    transition: 0.4s all;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .act {
    // font-weight: bold;
    color: #0091ff;
    border-color: #0091ff;
    font-size: 30rpx;
  }
}
</style>
